<template>
  <ViewBase ref="viewBase" class="article" @mouse-up-keyboard="handlerMouseUpKeyboard" @show-prompt="handlerViewBaseShowPrompt" @submit-input="handlerViewBaseSubmitInput">
    <div class="mn" v-if="lessonCnt.length">
      <div class="c">{{ currentWord.c }}</div>
      <div class="e">
        <div class="e1">{{ te2 }}</div>
        <div class="e2" v-if="flagPrompt">{{ currentWord.e }}</div>
      </div>
      <div class="result" :class="result.text">{{ result.text }}</div>
    </div>
  </ViewBase>
</template>
<script setup lang="ts">
import ViewBase from '../layout/ViewBase.vue'
import { ref, watch, computed } from 'vue'
import { useBaseStore } from '../stores/base.ts'
// 声明
const baseStore = useBaseStore()
const te2 = ref('')
const flagPrompt = ref(false)
const viewBase = ref()
const idx = ref(0)
const lessonTitle = ref('')
const lessonCnt = ref([])
const successCnt = ref(0)
const result = ref({
  text: '',
  flag: false,
})
// 枚举
enum resultState {
  success = 'success',
  fail = 'fail',
}
const currentArticleC = ref<string[]>([])
const currentArticleE = ref<string[]>([])
/**
 * 清除当前输入
 */
const clearCurrentInput = () => {
  te2.value = ''
  flagPrompt.value = false
  viewBase.value.clearInterValue()
}
/**
 * 重置单词
 */
const resetLesson = () => {
  idx.value = 0
  clearCurrentInput()
  const temObj = baseStore.currentLesson || { title: '', article: [] }
  lessonTitle.value = temObj.title
  lessonCnt.value = temObj.article
  const tempE: string[] = []
  const tempC: string[] = []
  temObj.article.forEach((e: [string, string]) => {
    tempE.push(e[0])
    tempC.push(e[1])
  })
  currentArticleE.value = tempE
  currentArticleC.value = tempC
}
/**
 * 监听当前单词库
 */
watch(() => baseStore.currentLesson, resetLesson)

/**
 * 当前单词
 */
const currentWord = computed(() => {
  return {
    e: lessonCnt.value[idx.value][0],
    c: lessonCnt.value[idx.value][1],
    maxIdx: lessonCnt.value.length - 1,
  }
})
/**
 * 后一个
 */
const handlerClickBtnNext = () => {
  if (idx.value < currentWord.value.maxIdx) {
    idx.value += 1
  }
}
/**
 * 键盘输入事件
 */
const handlerMouseUpKeyboard = (val: string) => {
  te2.value = val
}
/**
 * 显示提示
 */
const handlerViewBaseShowPrompt = () => {
  flagPrompt.value = !flagPrompt.value
}
/**
 * 检查输入内容
 */
const handlerViewBaseSubmitInput = () => {
  // 提交
  if (lessonCnt.value[idx.value][0] === te2.value) {
    result.value.text = resultState.success
    setTimeout(() => {
      result.value.text = ''
      nextWord()
    }, 1500)
  } else {
    result.value.text = resultState.fail
    setTimeout(() => {
      result.value.text = ''
    }, 1500)
  }
}
/**
 * 下一个单词
 */
const nextWord = () => {
  successCnt.value += 1
  if (idx.value === currentWord.value.maxIdx) {
    // 完成
    baseStore.flagComplete = true
  } else {
    handlerClickBtnNext()
    clearCurrentInput()
  }
}
</script>

<style lang="scss" scoped>
.article {
  display: flex;
  height: 100%;
  flex-direction: column;
  .hd,
  .ft {
    height: 48px;
    font-size: 0.2807017543859649rem;
  }
  .hd {
    border-bottom: 0.017543859649122806px solid #000;
  }
  .ft {
    border-top: 0.017543859649122806px solid #000;
  }
  .bd {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .mn {
    flex: 1;
    padding: 0.3508771929824561rem;
    font-size: 0.38596491228070173rem;
    text-align: center;
    overflow: auto;
    position: relative;
    .c {
      display: flex;
      flex-direction: column;
      align-items: center;
      .c-cnt {
        text-align: left;
        display: flex;
        flex-direction: column;
        width: auto;
        align-items: flex-start;
      }
    }
    .e {
      font-family: 'Times New Roman', Times, serif;
    }
  }
  .result {
    color: #fff;
    position: absolute;
    height: 0.5rem;
    line-height: 0.5rem;
    width: 100%;
    left: 0;
    bottom: 0px;
    font-size: 0.3059649123rem;
    box-sizing: content-box;
    transform: translateY(100%);

    body.shade & {
      color: #747474;
    }

    &.success {
      transition: all 0.2s linear 0.2s;
      transform: translateY(0);
      background-color: green;

      body.shade & {
        background-color: rgb(0, 36, 0);
      }
    }

    &.fail {
      transition: all 0.2s linear 0.2s;
      transform: translateY(0);
      background-color: red;

      body.shade & {
        background-color: rgb(46, 0, 0);
      }
    }
  }
}
</style>
